<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <button class="set">创建(存储)</button>
  <button class="get">获取</button>
  <button class="edit">修改</button>
</body>
<script>

  var setBtn = document.querySelector(".set");
  var getBtn = document.querySelector(".get");
  var editBtn = document.querySelector(".edit");

  // cookie的获取
  // 1. cookie 的存取都依赖于 document.cookie 
  // 2. 存储的时候是一条一条的的存的, 取的时候将所有cookie整合为一整条,返回 (每条数据之间 "; "分隔)

  setBtn.onclick = function () {
    var user = "a123123";
    var pwd = "123123";
    var phone = "17386141517";
    var email = "1272071495@qq.com";

    // setCookie("user",user);
    // setCookie("pwd",pwd);
    // setCookie("phone",phone);
    // setCookie("email",email);
    setCookie("user", user, 7);
    setCookie("pwd", pwd, 7);
    setCookie("phone", phone, 7);
    setCookie("email", email, 7);
  }


  getBtn.onclick = function () {
    // console.log(document.cookie); 
    // // 拆分数据  => 对象 {user:"a123123",pwd,phone,email}

    // var cookie = document.cookie;
    // var data = {};
    // if(cookie){  //有cookie时
    //     var list = cookie.split("; "); 
    //     console.log(list); //  ["user=a123123", "pwd=123123", "phone=17386141517", "email=1272071495@qq.com"]
    //     for(var i=0;i<list.length;i++){
    //         var item = list[i]; // "user=a123123", "pwd=123123",
    //         var name = item.split("=")[0];
    //         var val = item.split("=")[1];

    //         data[name] = val;
    //     }
    // }
    // console.log(data);

    console.log(getCookie("user"));
    console.log(getCookie("pwd"));
    console.log(getCookie("phone"));
    console.log(getCookie("email"));
  }

  editBtn.onclick = function () {
    var user = "b123123";
    var pwd = "456456";
    var phone = "17386141566";
    var email = "1272071466@qq.com";

    // setCookie("user",user);
    // setCookie("pwd",pwd);
    // setCookie("phone",phone);
    // setCookie("email",email);
    setCookie("user", user, 7);
    setCookie("pwd", pwd, 7);
    setCookie("phone", phone, 7);
    setCookie("email", email, 7);
  }





























  // key  键名
  // val  键值
  // day  过期时间
  // path  存储路径
  function setCookie(key, val, day, path = "/") {
    // var val = "a123123";

    if (day) {   // 有过期时间
      var date = new Date();
      date.setDate(date.getDate() + day);
      document.cookie = key + "=" + val + ";expires=" + date.toUTCString() + ";path=" + path;
    } else {
      document.cookie = key + "=" + val + ";path=" + path;
    }
  }

  function getCookie(key) {
    var cookie = document.cookie;
    // console.log(cookie);
    if (cookie) {  //有cookie时
      var list = cookie.split("; ");
      // console.log(list); //  ["user=a123123", "pwd=123123", "phone=17386141517", "email=1272071495@qq.com"]
      for (var i = 0; i < list.length; i++) {
        var item = list[i]; // "user=a123123", "pwd=123123",
        var name = item.split("=")[0];
        var val = item.split("=")[1];
        if (name === key) {
          return val;
        }

      }
    }
    return "";
  }




</script>

</html>